<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="./js/allecharts.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        //  通用属性定义

        //创建柱状图
        function createBarChart(xdata,ydata){
         alert(123);
          var  options = {
            tooltip: {show : true},
            toolbox : {
                show : true
                },
            legend: {
                data:['销量']
            },
            xAxis : [
                {
                    type : 'category',
                    data : xdata
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'销量',
                    type:'bar',
                    data:ydata

                }
            ]
        };
		 // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(options);
    }

       //创建饼状图
        function createPieChart(xdata){
        alert(12);
        options = {
			tooltip: {show : true},
				toolbox : {
					show : true
					},
            legend: {
                data:['调查']
            },
			series : [
				{
					type:'pie',
					radius : '55%',
					center: ['50%', '60%'],
					data:  xdata
				}
			]
        };
		 // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(options);
    }

      //创建k线图
        function createKChart(legenddata){
            options = {
					tooltip: {
						trigger: 'axis'
					},
					toolbox: {
						feature: {
							dataView: {show: true, readOnly: false},
							magicType: {show: true, type: ['line', 'bar']},
							restore: {show: true},
							saveAsImage: {show: true}
						}
					},
					legend: {
						data: legenddata //['蒸发量','降水量','平均温度']
					},
					xAxis: [
						{
							type: 'category',
							data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
						}
					],
					yAxis: [
						{
							type: 'value',
							name: '水量',
							min: 0,
							max: 250,
							interval: 50,
							axisLabel: {
								formatter: '{value} ml'
							}
						},
						{
							type: 'value',
							name: '温度',
							min: 0,
							max: 25,
							interval: 5,
							axisLabel: {
								formatter: '{value} °C'
							}
						}
					],
					series: [
						{
							name:'蒸发量',
							type:'bar',
							data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
						},
						{
							name:'降水量',
							type:'bar',
							data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
						},
						{
							name:'平均温度',
							type:'line',
							yAxisIndex: 1,
							data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
						}
					]
				};
             // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(options);
        }
		
		
			

		 function createKCharts(code,legenddata,xdata,ydata,ave){
			
			options = {
				tooltip: {
					trigger: 'axis',
				}, 
				toolbox: {
						feature: {
							dataView: {show: true, readOnly: false},
							magicType: {show: true, type: ['k','line']},
							restore: {show: true},
							saveAsImage: {show: true}
						}
					},
				legend: {
						data: legenddata //['蒸发量','降水量','平均温度']
					},
				grid: {
					left: '10%',
					right: '10%',
					bottom: '15%'
				},
				xAxis: {
					type: 'category',
					data:xdata,
					scale: true,
					boundaryGap : false,
					axisLine: {onZero: false},
					splitLine: {show: false},
					splitNumber: 20,
					min: 'dataMin',
					max: 'dataMax'
				},
				yAxis: [
					{
						type: 'value',
						name: '股价',
						min: 'dataMin',
						max: 'dataMax',
						interval: 2,
						axisLabel: {
							formatter: '{value} 元'
						}
					},
					{
						type: 'value',
						name: '均价',
						min: 'dataMin',
						max: 'dataMax',
						interval: 2,
						axisLabel: {
							formatter: '{value} 元'
						}
					}
				],
				dataZoom: [
					{
						type: 'inside',
						start: 1,
						end: 10
					},
					{
						show: true,
						type: 'slider',
						y: '90%',
						start: 1,
						end: 10
					}
				],
				series: [
					{
						name: code,
						type: 'k',
						yAxisIndex: 1,
						data: ydata
					},
					{
							name:'均价',
							type:'line',
							yAxisIndex: 1,
							data:ave
						}
				]
			};

			
				// 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(options);
		}
</script>
</body>
</html>